<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-09-08 15:11:29
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-15 17:51:52
 * @FilePath: /vuecli508-datav/src/components/ui/ol-map/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="ol-container">
        <div id="map" ref="rootmap" ></div>
        <div id="ol-popup">
            <slot>
                <div :class="['ol-popup', infoOverlayNsp.popupClass]" v-if="infoOverlayNsp.infoType !== 'teleport'">
                    <a href="javascript:void(0)" @click.stop="() => infoOverlayNsp.layer.setPosition()" class="close-btn">×</a>
                    <div id="ol-popup-content" class="item-box"></div>
                </div>
            </slot>
        </div>
    </div>
</template>
<script>
import mixin from './mixin/index';

export default {
    name: 'OlMap',
    mixins: [mixin],
    data() {
        return {
            isDebug: true
        };
    }
    // 以下拓展自己的地图功能
};
</script>
<style scoped lang="scss">
.ol-container {
    height: 100%;
    width: 100%;
    //   background-color: black;
}
#map {
    height: 100%;
    width: 100%;
}
.ol-popup {
    padding-top: vh(30);
    position: relative;
    .close-btn {
        position: absolute;
        top: vh(5);
        right: vh(5);
        display: block;
        color: #ffffff;
        width: vh(20);
        height: vh(20);
        text-align: center;
        line-height: vh(20);
        font-size: vh(20);
    }
}
.default-style {
    padding: vh(20) vh(12);
    background: url('./assets/popover.png') 0 0 no-repeat;
    background-size: 100% 100%;
    line-height: vh(28);
    color: #ffffff;
    .item-box{
        min-width: vw(100);
        max-height: vh(500);
        margin-top: vh(10);
        overflow: auto;
        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
    .detail {
        margin-right: vw(40);
    }
}
</style>
